<template>
  <div class="album">
    <div class="left">
      <template v-if="isHot">
        <img src="@/assets/images/top.png" alt="">
      </template>
      <template v-else>
        <img @click="selectAlbum(albumDetail.id)" :src="albumDetail.picUrl" alt="">
        <span class="pub">{{albumDetail.pub}}</span>
        <div class="mark"/>
      </template>
    </div>
    <div class="right">
      <div class="album-title">
        <span class="album-name">{{isHot ? '热门50首' : albumDetail.name}}</span>
        <i class="iconfont icon65zanting"/>
        <span class="geli">|</span>
        <i class="iconfont iconshoucang1"/>
      </div>
      <ul class="songs-list" v-if="songs.length">
        <li
          class="song"
          v-for="(song, index) of songs"
          :class="{'active': targetId === song.id}"
          @dblclick="selectSongs(song.id)"
          :key="song"
        >
          <span v-show="song.id !== targetId" class="tag">{{(index + 1).toString().padStart(2, '0')}}</span>
          <i v-show="song.id === targetId && playing" class="iconfont iconyangshengqispeaker85 tag"/>
          <i v-show="song.id === targetId && !playing" class="iconfont iconyangshengqispeaker88 tag"/>
          <i class="iconfont iconxihuan tag"/>
          <i class="iconfont iconxiazai tag"/>
          <div class="song-name">
            <p class="title" :title="song.name + song.aliasStr">
              <span class="name">{{song.name}}</span>
              <span>{{song.aliasStr}}</span>
            </p>
            <span class="sq">SQ</span>
            <span class="mv" @click="selectMv(song.mv)" v-if="song.mv !== 0">MV</span>
          </div>
          <span class="duration">
            {{song.duration}}
          </span>
        </li>
        <li class="more" v-if="isMore && isHot">
          <div class="look-all" @click="lookAll">查看全部50首<i class="iconfont iconyou"/></div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script lang="ts">
import { PropType, ref, computed, watchEffect } from 'vue'
import { player } from '@/store/modules/player'
import { useRouter } from 'vue-router'
import { debounce } from '@/utils/util'

export default {
  props: {
    songsList: {
      type: Array
    },
    isHot: {
      type: Boolean as PropType<boolean>,
      default: false
    },
    albumDetail: {
      type: Object as PropType<any>,
      default: () => ({})
    }
  },
  name: 'hotSongs',
  setup (props) {
    const router = useRouter()
    const isMore = ref<boolean>(true)
    const playing = computed(() => player.playing)
    const targetId = computed(() => player.currentSongLists[player.currentIndex])
    const songs = ref([])
    watchEffect(() => {
      if (props.isHot && props.songsList.length) {
        songs.value = [...props.songsList.slice(0, 10)]
      } else {
        songs.value = [...props.songsList]
      }
    })
    const lookAll = () => {
      isMore.value = false
      songs.value = props.songsList
    }
    const selectMv = (mv) => {
      router.push({ name: 'video', params: { id: mv } })
    }
    const selectSongs = debounce((id) => {
      player.changeSonglist({ list: props.songsList.map(item => item.id), id })
    }, 300)
    const selectAlbum = (id) => {
      router.push({ name: 'albumDetail', params: { id } })
    }
    return {
      playing,
      targetId,
      songs,
      isMore,
      lookAll,
      selectMv,
      selectSongs,
      selectAlbum
    }
  }
}
</script>

<style lang="scss" scoped>
.album {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  margin-bottom: 25px;

  .left {
    position: relative;
    display: flex;
    flex-direction: column;

    >img {
      width: 150px;
      height: 150px;
      margin-right: 50px;
      border-radius: 5px;
      box-sizing: border-box;
      border-top: 1px solid #D0D0D0;
      border-left: 1px solid #D0D0D0;
      border-bottom: 1px solid #D0D0D0;
      border-right: 1px solid transparent;
    }

    .pub {
      padding-top: 5px;
      font-size: 12px;
      color: #333333;
    }

    .mark {
      position: absolute;
      top: -15px;
      left: 0;
      background-image: url("../../../assets/images/album.png");
      background-position: 9px;
      background-repeat: no-repeat;
      background-size: contain;
      width: 180px;
      height: 180px;
      z-index: -1;
    }
  }

  .right {
    flex: 1;

    .album-title {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      margin-bottom: 10px;

      .album-name {
        font-size: 16px;
        font-weight: bold;
        margin-right: 15px;
      }

      >i {
        cursor: pointer;
        font-size: 20px;
        color: #646464;
      }

      .geli {
        padding: 0 10px;
        font-size: 12px;
        color: #D0D0D0;
      }
    }

    .songs-list {

      li:nth-of-type(even) {
        background-color: #f8f8f8;
      }

      li:nth-of-type(odd) {
        background-color: #f0f1f2;
      }

      .song {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        line-height: 1.2;
        font-size: 13px;
        height: 36px;
        cursor: default;

        .tag {
          color: #cbcbcb;
          padding-left: 10px;
        }

        .song-name {
          flex: 1;
          color: #333333;
          padding-left: 15px;
          display: flex;
          flex-wrap: nowrap;
          align-items: center;

          .title{
            display: -webkit-box;
            overflow: hidden;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
          }

          .sq, .mv {
            margin-left: 6px;
            border: 2px solid #ec4141;
            border-radius: 3px;
            color: #ec4141;
            display: inline-block;
            line-height: 1.1;
            font-weight: 500;
          }

          .mv {
            cursor: pointer;
          }
        }

        .duration {
          color: #9f9f9f;
          padding-right: 30px;
          padding-left: 5px;
        }

        &:hover {
          background-color: #e5e5e5;
        }
      }

      .active {
        background-color: #e5e5e5;

        .tag:nth-of-type(1) {
          color: #ec4141;
        }

        .tag:nth-of-type(2) {
          color: #ec4141;
        }

        .name {
          color: #ec4141;
        }
      }

      .more {
        display: flex;
        justify-content: flex-end;
        height: 36px;
        align-items: center;

        .look-all {
          padding-right: 30px;
          color: #9f9f9f;
          font-size: 12px;
          cursor: pointer;
          display: flex;
          align-items: center;

          >i {
            padding-left: 2px;
            font-size: 20px;
            line-height: 1;
          }

          &:hover {
            color: #666666;
          }
        }
      }
    }
  }
}
</style>
